<!--
* @description 参数1
* @fileName 04.表单元素的其他绑定
* @author userName
* @date 2024-01-22 11:09:10
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>04.表单元素的其他绑定</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <div id="app">
        <label>选择
            <input type="checkbox"  v-model="msg">
        </label>
        <hr>
        {{msg}}
        <hr>
        <label>足球
            <input type="checkbox" value="足球" v-model="plays">
        </label>&nbsp;&nbsp;&nbsp;&nbsp;
        <label>篮球
            <input type="checkbox" value="篮球" v-model="plays">
        </label>&nbsp;&nbsp;&nbsp;&nbsp;
        <label>乒乓球
            <input type="checkbox" value="乒乓球" v-model="plays">
        </label>&nbsp;&nbsp;&nbsp;&nbsp;
        <label>羽毛球
            <input type="checkbox" value="羽毛球"  v-model="plays">
        </label>
        <hr>
        {{plays}}
        <hr>
        <label>男
            <input type="radio" value="男" name="gender" v-model="gender"  >
        </label>&nbsp;&nbsp;&nbsp;&nbsp;
        <label>女
            <input type="radio" value="女" name="gender" v-model="gender"  >
        </label>
        <hr>
        {{gender}}
        <hr>
        <select name="city" id="city" v-model="city" >
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
        <hr>
        <!-- 下拉可以多选 -->
        <select name="city2" id="city2" multiple v-model="cities">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
        <hr>
        {{cities}}

    </div>

    <script>
        /*
        checkbox:  value的默认值   true/false
         checkbox:  value非默认值  通过一个数组保存选中的元素
        */
        var vm = new Vue({
            data:{
                msg:false,
                plays:[],
                gender:"男",
                city:"sh",
                cities:[]

            },
        });
        vm.$mount("#app")
    </script>
</body>

</html>